<!doctype html>
<html>
	<head>
		<title>注册</title>
		<link rel="stylesheet" type="text/css" href="../../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../static/css/myborder.css"/>
		<style>
			*,
			*:before,
			*:after {
				box-sizing: border-box;
				position: relative;
			}

			body,
			html {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
				background: black;
			}

			canvas {
				display: block;
				width: 100%;
				height: 100%;
			}

			.instructions {
				position: absolute;
				top: 0;
				left: 0;
				padding: 0.5em;
				margin: 0.5em;
				background: rgba(0, 0, 0, 0.3);
				color: #FFF;
				font-size: 10px;
				font-family: monospace;
			}
			.box{
				position: absolute;
				top: 20%;
				height: 60%;
				width: 40%;
				margin: 0 30% 0 30%;
				border: #0000FF solid 1px;
				background: #FFFFFF;
				border-radius: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.form{
				position: absolute;
				width: 90%;
				height: 90%;
				border: gold solid 1px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<div class="box">
			<form class="form" action="/register" method="post">
				{% with info=info%}
				<div id="title">
					{{info}}
				</div>
				{% endwith %}
				<div class="form-group">
					<label>用户名:</label>
					<input type="text" name="username" id="" value="" class="form-control"/>
				</div>
				<div class="form-group">
					<label>密码:</label>
					<input type="password" name="password" id="" value="" class="form-control"/>
				</div>
				<input class="btn btn-default" type="submit" value="注册" style="background: gold;"/>
			</form>
		</div>

		<script>
			console.clear();

			/* Play with these values! */
			const PARTICLE_COUNT = 100;
			const SAFE_DISTANCE = 130;
			const INFECTED_DISTANCE = 15;
			const INFECTION_RATE = 0.25;
			const RECOVERY_TIME = 14000;
			const STAY_AT_HOME = 0.1;

			/* ---------------------------------- */

			let particles = [];

			const STATUSES = {
				HEALTHY: "HEALTHY",
				INFECTED: "INFECTED",
				RECOVERED: "RECOVERED"
			};

			const elBody = document.body;
			const elCanvas = document.querySelector("#canvas");
			const ctx = elCanvas.getContext("2d");

			let width, height;

			function resize() {
				width = elCanvas.width = elBody.clientWidth;
				height = elCanvas.height = elBody.clientHeight;
			}
			resize();
			window.addEventListener("resize", resize);

			/* ---------------------------------- */

			class Particle {
				constructor() {
					this.x = Math.random() * width;
					this.y = Math.random() * height;
					this.radius = 3;
					this.color = "white";
					this.speed = Math.random() < STAY_AT_HOME ? 0 : 1;
					this.directionAngle = Math.floor(Math.random() * 360);
					this.vector = {
						x: Math.cos(this.directionAngle) * this.speed,
						y: Math.sin(this.directionAngle) * this.speed
					};
					this.status = STATUSES.HEALTHY;

					if (Math.random() < INFECTION_RATE) {
						this.infect();
					}
				}
				infect() {
					if (
						this.status === STATUSES.INFECTED ||
						this.status === STATUSES.RECOVERED
					) {
						return;
					}

					this.color = "green";
					this.status = STATUSES.INFECTED;

					setTimeout(() => {
						this.recover();
					}, RECOVERY_TIME);
				}
				recover() {
					this.status = STATUSES.RECOVERED;
					this.color = "hotpink";
				}
				draw(drawCtx) {
					drawCtx.beginPath();
					drawCtx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
					drawCtx.closePath();
					drawCtx.fillStyle = this.color;
					drawCtx.fill();
				}
				update() {
					this.checkBoundaries();
					this.x += this.vector.x;
					this.y += this.vector.y;
				}
				checkBoundaries() {
					if (this.x > width || this.x < 0) {
						this.vector.x *= -1;
						/* Ensure the dots are pushed inside */
						this.x = Math.max(0, Math.min(width, this.x));
					}
					if (this.y > height || this.y < 0) {
						this.vector.y *= -1;
						/* Ensure the dots are pushed inside */
						this.y = Math.max(0, Math.min(height, this.y));
					}
				}
			}

			/* ---------------------------------- */

			function distance(x1, y1, x2, y2) {
				var dx = x1 - x2;
				var dy = y1 - y2;
				return Math.sqrt(dx * dx + dy * dy);
			}

			function linkParticles(particle, otherParticles, drawCtx) {
				for (const p of otherParticles) {
					const d = distance(particle.x, particle.y, p.x, p.y);

					if (d > SAFE_DISTANCE) {
						continue;
					}

					// Infect other particle!
					if (particle.status === STATUSES.INFECTED && d < INFECTED_DISTANCE) {
						p.infect();
					}

					const opacity = 0.8 - (d / SAFE_DISTANCE) * 0.8;
					drawCtx.lineWidth = 1;
					drawCtx.strokeStyle = particle.color; //rgba(255,255,255,${opacity})`;
					drawCtx.globalAlpha = opacity;
					drawCtx.beginPath();
					drawCtx.moveTo(particle.x, particle.y);
					drawCtx.lineTo(p.x, p.y);
					drawCtx.closePath();
					drawCtx.stroke();
					drawCtx.globalAlpha = 1;
				}
			}

			/* ---------------------------------- */

			function render() {
				try {
					requestAnimationFrame(render);

					ctx.clearRect(0, 0, width, height);

					particles.forEach(particle => {
						particle.update();
						if (particle.status === STATUSES.INFECTED) {
							linkParticles(particle, particles, ctx);
						}
						particle.draw(ctx);
					});
				} catch (e) {
					throw e;
				}
			}

			render();

			/* ---------------------------------- */

			function reset() {
				particles = [];
				for (var i = 0; i < PARTICLE_COUNT; i++) {
					particles.push(new Particle());
				}
			}
			reset();

			document.addEventListener("click", reset);
		</script>

	</body>
</html>
